import React, { Component } from 'react';
import './Home.css'
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: '数据内容样式设置',
            arr: ['米饭', '焖面', '炖鸡'],
            activeIndex: 2
        }

    }
    render() {
        return (
            <div>
                <h2>样式渲染-style渲染</h2>
                {/* style样式设置的是个对象 */}
                <p style={{ color: '#fff', backgroundColor: 'red' }}>{this.state.msg}</p>
                <p style={{ color: 10 > 100 ? '#fff' : '#ccc', fontSize: '20px', backgroundColor: 'blue' }}>样式判定</p>
                <ul>
                    {
                        this.state.arr.map((item, index) => {
                            return (
                                <li key={index} className={this.state.activeIndex == index ? 'active' : ''}>{item}</li>
                            )
                        })
                    }
                </ul>


            </div>
        );
    }
}

export default Home;